@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

// 禁止折行
@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 背景图片
@mixin bg-image($url) {
  background-image: url($url + '@2x.png');
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + '@3x.png');
  }
}

// 扩展小图标按钮的点击区域
@mixin extend-click() {
  position: relative;
  &:before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin flex-space-between-vertical {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

@mixin flex-space-between {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

@mixin flex-space-around {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
}

@mixin flex-row-vertical {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

@mixin flex-column-horizontal {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
}

@mixin flex-center {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
